import React, { Component } from 'react';
import { connect } from 'dva';
import { Row, Col, Icon,  Tooltip, Button} from 'antd';
import { ChartCard, Field,} from '../../components/Charts';
import Trend from '../../components/Trend';
import styles from './Index.less';
import docCookies from "../../common/DocCookies";

@connect(state => ({
  msg: state.msg,
}))
export default class Index extends Component {
  state = {
    globalRsId:docCookies.getItem("rsId"),
    globalUserRoles:docCookies.getItem("roles"),
    totalMsg:0,
    totalDayMsg:0,
    unauditMsg:0,
    unauditDayMsg:0,
    playMsg:0,
    playDayMsg:0,
    follower:0,
    followerDay:0,
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const params = {
      rsId:this.state.globalRsId,
    };
    dispatch({
      type: 'msg/analysisIndex',  //请求的action
      payload:params,
      callback:(response) =>{
        const result = response.data;
        this.setState({
          totalMsg:result.totalMsg ,
          totalDayMsg:result.totalDayMsg ,
          unauditMsg:result.unauditMsg ,
          unauditDayMsg:result.unauditDayMsg ,
          playMsg:result.playMsg ,
          playDayMsg:result.playDayMsg ,
          follower:result.follower ,
          followerDay:result.followerDay ,
        });
      }
    });
  }

  //跳转到对应的页面
  handleGoToTargetPage = (pageTyep) => {
    const { dispatch} = this.props;
    const param = {
      pageTyep:pageTyep
    }
    dispatch({
      type: 'msg/goToTargetPage',
      payload:param
    });

  }

  handleRenderFooter = (pageType,msgTitle,msgNum,roleName) => {
    const { globalUserRoles } = this.state;
    var self = this;
    var roles = globalUserRoles == null ? "":globalUserRoles;
    //msgType == 0 :累计消息总量
    if(roles.toString().indexOf(roleName) != -1 || roles.toString().indexOf("ROLE_RS_ADMIN") != -1){
      return (
          <div >
            <Field label={msgTitle} value={msgNum} style={{float:"left"}} /> <Button type="primary" size="small" style={{float:"right"}} onClick={()=>self.handleGoToTargetPage(pageType)}>点击查看详情<Icon type="arrow-right" /></Button>
          </div>
        );
    }else {
      return (
        <Field label={msgTitle} value={msgNum} />
      );
    }
  }
  render() {
    const { totalMsg,totalDayMsg,unauditMsg,unauditDayMsg,playMsg,playDayMsg,follower,followerDay } = this.state;
    const topColResponsiveProps = {
      xs: 24,
      sm: 12,
      md: 12,
      lg: 12,
      xl: 6,
      style: { marginBottom: 24 },
    };

    return (
      <div>
        <Row gutter={24}>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="累计消息总量"
              action={<Tooltip title="消息总量"><Icon type="info-circle-o" /></Tooltip>}
              total={totalMsg}
              footer={this.handleRenderFooter(0,"今日消息总量",totalDayMsg,"ROLE_RS_ADMIN")}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="待审消息量"
              action={<Tooltip title="导播待审核消息量"><Icon type="info-circle-o" /></Tooltip>}
              total={unauditMsg}
              footer={this.handleRenderFooter(1,"今日待审消息量",unauditDayMsg,"ROLE_DAOBO")}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="待播消息量"
              action={<Tooltip title="主播待播消息量"><Icon type="info-circle-o" /></Tooltip>}
              total={playMsg}
              footer={this.handleRenderFooter(2,"今日待播消息量",playDayMsg,"ROLE_ZHUBO")}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
          <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="粉丝总数"
              action={<Tooltip title="电台粉丝总数"><Icon type="info-circle-o" /></Tooltip>}
              total={follower}
              footer={this.handleRenderFooter(3,"今日消粉丝增长数",followerDay,"ROLE_RS_ADMIN")}
              contentHeight={46}
            >
            </ChartCard>
          </Col>
        </Row>
      </div>
    );
  }
}
